<template>
  <div>
    <!--上面的input框和select-->
    <TopFilter ref="topFilter" :list="topFilterList" labelWidth="110" @filterChange="changeHandle"
      @onCollapse="collapseHandle"></TopFilter>
    <!-- 弹框 -->
    <Drawer
        :visible.sync="visiable"
        title='充电桩权益明细'
        destroyOnClose
        :containerStyle="{height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px'}">
      <detail @close="close" :formData="top" />
    </Drawer>

    <!-- table表格 -->
    <FilterTable ref="table" :columns="columns" :fetchapi="fetchapi" :params="fetchParams" :datakey="'records'"
      :isSelectColumn="false" :onColumnsChange="columns => (this.columns = columns)"
      :onRowSelectChange="arr => (this.selectColumn = arr)">
      <template slot="controls">
        <multiuse-button size="small" type="primary" :click="exportData.bind()">导出</multiuse-button>
      </template>
    </FilterTable>

    <BaseDialog title="经销商查询" :visible.sync="isShowSearchCustomer" destroyOnClose :containerStyle="{ height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px' }">
        <SearchCustomer :customerNo="kehuxuanze" @close="isShowSearchCustomer = false" @addCustomerCode="confirmSearchCustomer" />
      </BaseDialog>

  </div>
</template>

<script>
import { dictionary } from '@/utils/dictMixin';
import { detailInfo, getClaimListForExport } from '@/api/repair/chargingPile/Query';
import ownerSeacher from './ownerSeacher';
import SearchCustomer from './SearchCustomer';
import detail from './detail';
import { exportExcelFile } from '@/utils';

export default {
  name: 'Query',
  components: {
    detail,
    ownerSeacher,
    SearchCustomer
  },
  mixins: [dictionary],
  data() {
    return {
      topFilterList: this.createTopFilterList(),
      columns: this.createTableColumns(),
      fetchapi: detailInfo,// 后端API
      fetchParams: { xhrAbort: false },
      visiable: false,
      handleType: '',
      params: {},
      kehuxuanze: '',
      formData: {},
      resData: {},
      title: '',
      top: {},
      initData: {},
      rowSelectData: [],
      selectColumn: [],
      isShowSearchCustomer: false,
    }
  },

  methods: {
    createTopFilterList() {
      return [
        {
          type: 'INPUT',
          label: '销售订单编号',
          fieldName: 'xsddhm'
        },
        {
          type: 'SELECT',
          label: '充电桩权益',
          fieldName: 'tramEquity',
          placeholder: '请选择',
          itemList: this.createDictList('3047'),
        },
        {
          type: 'SELECT',
          label: '权益使用状态',
          fieldName: 'equityStatus',
          placeholder: '请选择',
          itemList: this.createDictList('3048'),
        },
        {
          type: 'INPUT',
          label: '工单号',
          fieldName: 'workNo',
        },
        {
          type: 'SELECT',
          label: '工单状态',
          fieldName: 'workStatus',
          placeholder: '请选择',
          itemList: this.createDictList('3049', [30491001]),
        },
        {
          type: 'SELECT',
          label: '订单类型',
          fieldName: 'xsddlx',
          placeholder: '请选择',
          itemList: this.createDictList('3050', [30501002]),
        },
        {
          type: 'INPUT',
          label: '客户姓名',
          fieldName: 'customerName',
        },
        {
          type: 'INPUT',
          label: '客户手机号',
          fieldName: 'phone',
        },
        {
          type: 'INPUT',
          label: 'VIN',
          fieldName: 'vin',
        },
        {
          type: 'INPUT',
          label: '经销商代码',
          fieldName: 'dealerCode',
          readonly: true,
          unitRender: () => {
            return (
              <el-button
                icon="el-icon-search"
                onClick={() => {
                  this.isShowSearchCustomer = true;
                }}
              ></el-button>
            );
          },
          onEnter: val => {
            console.log('对方经销商 onEnter');
            this.isShowSearchCustomer = true;
          }
        },
        {
          type: 'INPUT',
          label: '经销商简称',
          fieldName: 'dealerShortname',
        },
        {
          type: 'RANGE_DATE',
          label: '订单创建日期',
          initialValue: [],
          dateType: 'daterange',
          style: { minWidth: '200px' },
          fieldName: 'orderStartDate|orderEndDate',
          // rangeSeparator: '至'
        },
      ];
    },
    createTableColumns() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 70,
          sorter: true,
          fixed: 'left',
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '操作',
          dataIndex: 'column_action',
          width: 100,
          fixed: 'left',
          render: props => {
            return (
              <div>
                <el-divider direction="vertical" />
                <el-button size="mini" type="text" onClick={() => this.detailHandle(props.row,)} >
                  明细
                </el-button>
              </div>
            );
          }
        },
        {
          title: '经销商代码',
          dataIndex: 'dealerCode',
          sorter: true
        },
        {
          title: '经销商简称',
          dataIndex: 'dealerShortname',
          sorter: true
        },
        {
          title: '销售订单编号',
          dataIndex: 'xsddhm',
          sorter: true,
          precision: 2
        },
        {
          title: '充电桩权益',
          dataIndex: 'tramEquity',
          sorter: true,
          dictItems: this.createDictList('3047'),
        },
        {
          title: '权益使用状态',
          dataIndex: 'equityStatus',
          sorter: true,
          dictItems: this.createDictList('3048'),
        },
        {
          title: '工单号',
          dataIndex: 'workNo',
          sorter: true
        },
        {
          title: '工单状态',
          dataIndex: 'workStatus',
          dictItems: this.createDictList('3049'),
          sorter: true
        },
        {
          title: '订单类型',
          dataIndex: 'xsddlx',
          dictItems: this.createDictList('3050'),
          render: props => {
                        // 防止店端订单类型同步到当前库中，造成显示错误
                        if (props.row.xsddlx == 27011001){
                            props.row.xsddlx = 30501001;
                        }
                        if (props.row.xsddlx == 27011004){
                            props.row.xsddlx = 30501002;
                        }if (props.row.xsddlx == 27011002){
                            props.row.xsddlx = '试驾车';
                        }
                        return <span>{this.createDictText(props.row.xsddlx, '3050')}</span>;
                    },
          sorter: true
        },
        {
          title: '客户姓名',
          dataIndex: 'customerName',
          sorter: true
        },
        {
          title: '客户手机号',
          dataIndex: 'phone',
          sorter: true
        },
        {
          title: 'VIN',
          dataIndex: 'vin',
          width: 150,
          sorter: true
        },
        {
          title: '车系',
          dataIndex: 'series',
          width: 150,
          sorter: true
        },
        {
          title: '车型',
          dataIndex: 'model',
          width: 150,
          sorter: true
        },
        {
          title: '销售顾问',
          dataIndex: 'adviser',
          sorter: true
        },
        {
          title: '订单创建时间',
          dataIndex: 'orderCreatedTime',
          sorter: true,
          dateFormat: 'yyyy-MM-dd HH:mm:ss',
        },
        {
          title: '权益更新时间',
          dataIndex: 'equityUpdateTime',
          sorter: true,
          dateFormat: 'yyyy-MM-dd HH:mm:ss',
        }
      ];
    },


    async exportData() {
      let params = { ...this.fetchParams };
      console.log(params, '导出::');
      let res = await getClaimListForExport(params);
      console.log(res.data, '导出::');
      try {
        exportExcelFile(res.data, '充电桩管理');
      } catch (e) {
        console.log(e, '错误::');
      }
    },

    //明细的函数
    detailHandle(e) {
      /* console.info(e + "---------------------------------row") */
      this.top = e;
      this.visiable = true;

    },

    async confirmSearchCustomer(row) {
      console.log(row, 'rowCustomer');
      this.rowData = row[0];
      console.log('row[0].dealerCode', row[0].dealerCode);
      this.topFilterList.find(x => x.fieldName == 'dealerCode').initialValue = row[0].dealerCode;
      this.topFilterList.find(x => x.fieldName == 'dealerShortname').initialValue = row[0].dealerShortname;
    },

    //搜索的
    changeHandle(val) {
      val.orderStartDate = val.orderStartDate ? val.orderStartDate.split(' ')[0] + ' 00:00:00' : '';
      val.orderEndDate = val.orderEndDate ? val.orderEndDate.split(' ')[0] + ' 23:59:59' : '';
      // val.orderStartDate && (val.orderStartDate = val.orderStartDate.split(' ')[0] + ' 23:59:59');
      console.log('输出的参数', val)
      this.fetchParams = Object.assign({}, val);

    },
    //展开收起的
    collapseHandle() {
      this.$nextTick(() => {
        this.BaseTable.EXECUTE_RESET_HEIGHT();
      });
    },

    close() {
      this.visiable = false;
    }
  }
}

</script>
